<template>
	<view>
		<view class="" style="background-color: white; height: 190rpx; ">
			<view class="d-flex"
				style="position: fixed;z-index: 1000;background-color: white;height: 190rpx;width: 100%; align-items: center;">
				<image src="@/static/img/login/right.png" mode="widthFix" class="back" @tap="back"></image>
				<view class="search" @tap="hmSearch">
					<image src="@/static/img/index/sousuo1.png" mode="widthFix" style="width: 30rpx;"></image>
					<view class="">{{serchText}}</view>
				</view>
			</view>
		</view>

		<view class="" style="background-color:#eff0f2;">
			<view class="mt-2 pt-2 pb-2">
				<!-- <view class="ml-2" style="border-left: 3rpx solid #e80909;">爆</view> -->
				<view class="ml-2" style="border-left: 5rpx solid #e80909;">
					<view class="ml-2 lp">{{listTitle}}</view>
				</view>
				<view class="d-flex flex-wrap">
					<view class="grid" @tap="godetail(List.id)" v-for="(List) in lists" :key="List.id">
						<view class="">
							<image class="grid-image" :src="List.cover_ico" mode="aspectFill"></image>
							<view class="text">{{List.product_name}}</view>
						</view>
						<view class="grid-text">
							{{List.product_introduct}}
						</view>
						<view class="d-flex">
							<view class="flex-1 price">￥{{List.member_price}} </view>
							<view class="sale sale1">已售</view>
							<view class="six  sale1">{{List.sell_num}}</view>
						</view>
					</view>
				</view>

				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import helang from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall.vue"
	export default {
		data() {
			return {
				serchText: '大家都在搜：茶',
				listTitle: '',
				page: 1,
				keyword: '',
				lists: [],
				loadingType: 'more',
			};
		},

		components: {
			uniLoadMore
		},

		onLoad(options) {
			this.listTitle = options.title;
			this.getSelectedProduts(options.field);
		},

		methods: {
			hmSearch() {
				uni.navigateTo({
					url: './HM-search'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			async getSelectedProduts(field = 'is_famous_business', type = 'add') {
				//这里是将订单挂载到tab列表下
				if ((this.loadingType === 'loading' || this.loadingType === 'noMore') && type == 'add') {
					//防止重复加载
					return;
				}

				this.loadingType = 'loading';

				let dataObj = {
					page: this.page,
					keyword: this.keyword,
					field: field
				}
				let url = '/getProdutsByField';

				let ldata = await this.$myRequest({
					url: url,
					data: dataObj
				})

				let ndata = ldata.data.data.list;
				if (ndata.length > 0) {
					this.lists = [...this.lists, ...ndata];
					let count = ldata.data.data.totalList;
					if (ndata.length >= count) {
						this.page = this.page + 1;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'noMore';
					}
				} else {
					this.loadingType = 'noMore';
				}
			},
			
			async godetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		},
	}
</script>

<style lang="scss">
	.back {
		width: 17rpx;
		height: 29rpx;
		margin-top: 80rpx;
		margin-left: 20rpx;
	}

	.search {
		background-color: #f0f4f7;
		width: 90%;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		margin-right: 10rpx;
		border-radius: 20rpx;


		image {
			display: flex;
			margin: 20rpx 30rpx 0 40rpx;
		}

		view {
			font-size: 28rpx;
			color: #545556;
			margin-top: -35rpx;
			margin-left: 90rpx;

		}
	}
	
	.grid {
		background-color: white;
		width: 345rpx;
		height: 100%;
		border-radius: 20rpx;
		margin-left: 3%;
		margin-top: 25rpx;
	}
	
	.grid-text {
		color: #999;
		font-size: 24rpx;
		letter-spacing: 3rpx;
		margin: 10rpx 0 20rpx 15rpx;
	}
	
	.text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		letter-spacing: 2rpx;
		word-break: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 5rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
	}
	
	.price {
		color: #e80909;
		margin-left: 15rpx;
		margin-bottom: 10rpx;
	}
	
	.sale1 {
		font-size: 26rpx;
		letter-spacing: 3rpx;
		color: #999;
		margin-top: 5rpx;
	}
	
	.six {
		margin-left: 10rpx;
		margin-right: 25rpx;
	}
	
	.grid-image {
		width: 165rpx;
		height: 180rpx;
		margin: 70rpx 0 30rpx 100rpx;
	}
</style>
